<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 500px;
				margin: 20px auto;
				box-shadow: 3px 3px 15px #2b2b2b;
			}
		</style>
	</head>
	<body>
		<div id="echarts" class="box"></div>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/Point.js" ></script>
		<script type="text/javascript" src="js/Graph.js" ></script>
		<script type="text/javascript">
			function ludou(id,data){
				var color = ['#467703','#0b70a2','#f96500','#daa67f','#ac3232','#964377','#3435ad','#ad34fd','#328543','#6576d2']
				var w=$('#'+id).width();
				var h = $('#'+id).height();
				var padding = 40;
				var maxW = w-padding*2,minW = 100,cX = w/2,gap=10;
				var maxH = h-padding*2;
				var len = data.length;
				var itH = (maxH-(len-1)*gap)/len;
				if(minW>maxW){minW=maxW;}
				var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="'+w+'" height="'+h+'">',defs = '',item = '';
				var p1 = new Point(padding,padding);
				var p2 = new Point(cX,padding);
				var p3 = new Point(cX-minW/2,padding+maxH);
				var bzr = new Bezier(p1,p2,p3); 
				var itemArr = [];
				for (var i in data) {
					item = '';
					defs+='<defs>'+
						'    <linearGradient id="topEllipse'+i+'" x1="0%" y1="0%" x2="0%" y2="100%">'+
						'      <stop offset="0%" style="stop-color:'+color[i%color.length]+';stop-opacity:1" />'+
						'      <stop offset="100%" style="stop-color:#262626;stop-opacity:1" />'+
						'    </linearGradient>'+
						'</defs>';
					defs+='<defs>'+
						'    <linearGradient id="middleRect'+i+'" x1="0%" y1="0%" x2="100%" y2="0%">'+
						'      <stop offset="0%" style="stop-color:#080707;stop-opacity:1" />'+
						'      <stop offset="100%" style="stop-color:'+color[i%color.length]+';stop-opacity:1" />'+
						'    </linearGradient>'+
						'</defs>';
					i=parseInt(i);
					var x1,y1=(itH+gap)*i+padding,y1b=y1+itH;
					//11111111111111111111111111111111111111111111
					x1 = bzr.getBezierX(y1,h);
					x1b = bzr.getBezierX(y1b,h);
					//22222222222222222222222222222222222222222222
					var rx = cX-x1,ry=rx/5;
					var cx=cX,cy=y1;
					//33333333333333333333333333333333333333333333
					var rxb = cX-x1b,ryb=rxb/5;
					var cxb=cX,cyb=y1b;
					//44444444444444444444444444444444444444444444
					var rxbm = cX-x1b-rxb/12,rybm=ryb*0.85;
					item += graph.drawEllipse(cxb,cyb,rxb,ryb,'fill:'+color[i%color.length]+';opacity:0.6;');//3333小圆外
					item += graph.drawEllipse(cxb,cyb,rxbm,rybm,'fill:'+color[i%color.length]+';');//4444小圆内
					item += drawItem(cX,i,itH,x1,x1b,y1,maxW,'fill:url(#middleRect'+i+');',gap,padding,cxb,cyb,rxb,ryb);//1111路径
					item += graph.drawEllipse(cx,cy,rx,ry,'fill:'+color[i%color.length]+';');//2222大圆
					var rxtm = rx*0.88,rytm=ry*0.82;
					item += graph.drawEllipse(cx,cy,rxtm,rytm,'fill:url(#topEllipse'+i+');');//2222大内圆
					itemArr.push(item);
				}
				svg += defs;
				for(var i=itemArr.length-1;i>=0;i--){
					svg += itemArr[i];
				}
				var svgDom = $(svg);
				svg += '</svg>';
				$('#'+id).append(svgDom);
			}
			var arr = [];
			for(var i=0;i<4;i++){
				arr.push(i);
			}
			ludou('echarts',arr);
			function drawItem(cx,idx,h,x1,x1b,cy1,w,style,gap,padding,cxb,cyb,rxb,ryb){
				var cy2 = cy1+h;
				console.log(x1b,cy2,h,idx);
				return '<path  d="M'+x1+' '+cy1+' L '+(w-x1+padding*2)+' '+cy1+' L '+(w-x1b+padding*2)+' '+cy2+' A'+rxb+','+ryb+' 180,0 1 '+x1b+' '+cy2+' Z"  style="'+style+'" οnclick="itemClick(this,'+idx+');" />';
			}
			function itemClick(that,idx){
				console.log(idx);
			}
			function drawGuo(){
//				$('#echarts').empty();
				var svg = '<svg width="500" height="500">';
				svg+='<defs>'+
					'    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">'+
					'      <stop offset="0%" style="stop-color:rgb(16, 29, 0);stop-opacity:0.7" />'+
					'      <stop offset="75%" style="stop-color:#a9c63f;stop-opacity:0.7" />'+
					'      <stop offset="100%" style="stop-color:#a9c63f;stop-opacity:0.7" />'+
					'    </linearGradient>'+
					'</defs>';
				svg+='<defs>'+
					'    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">'+
					'      <stop offset="0%" style="stop-color:rgb(85, 136, 0);stop-opacity:1" />'+
					'      <stop offset="100%" style="stop-color:rgb(16, 29, 0);stop-opacity:1" />'+
					'    </linearGradient>'+
					'</defs>';
				svg+='<defs>'+
					'    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">'+
					'      <stop offset="0%" style="stop-color:rgb(16, 29, 0);stop-opacity:1" />'+
					'      <stop offset="75%" style="stop-color:#a9c63f;stop-opacity:1" />'+
					'      <stop offset="100%" style="stop-color:#a9c63f;stop-opacity:1" />'+
					'    </linearGradient>'+
					'</defs>';
				var topW = 340,bottomW = 160,h=60;
				var cx = 250,cy = 110;
				var rxt = topW/2,ryt = 35;
				var cyb = cy+h+10,rxb = 80,ryb = 23;
				svg += '<path d="M'+(cx+rxt)+' '+cy+' Q '+(cx+rxb+(rxt-rxb)/2)+' '+(cy+h/2)+' '+(cx+rxb)+' '+(cy+h+ryb/2)+' A'+rxb+','+ryb+' 180,0 1 '+(cx-rxb)+' '+(cy+h+ryb/2)+' Q '+(cx-rxb-(rxt-rxb)/2)+' '+(cy+h/2)+' '+(cx-rxt)+' '+cy+' A'+rxt+','+ryt+' 180,0 0 '+(cx+rxt)+' '+cy+'" style="fill:url(#grad3);" />';
				svg += '<ellipse cx="'+cx+'" cy="'+cyb+'" rx="'+rxb+'" ry="'+ryb+'" style="fill:#98b82f;"/>';
				svg += '<ellipse cx="'+cx+'" cy="'+cyb+'" rx="'+(rxb-6)+'" ry="'+(ryb-4)+'" style="fill:#527a08;"/>';
				svg += '<path d="M'+(cx+rxt)+' '+cy+' Q '+(cx+rxb+(rxt-rxb)/2)+' '+(cy+h/2)+' '+(cx+rxb)+' '+(cy+h+ryb/2)+' A'+rxb+','+ryb+' 180,0 1 '+(cx-rxb)+' '+(cy+h+ryb/2)+' Q '+(cx-rxb-(rxt-rxb)/2)+' '+(cy+h/2)+' '+(cx-rxt)+' '+cy+' A'+rxt+','+ryt+' 180,0 0 '+(cx+rxt)+' '+cy+'" style="fill:url(#grad1);" />';
				svg += '<ellipse cx="'+cx+'" cy="'+cy+'" rx="'+rxt+'" ry="'+ryt+'" style="fill:#7dae0a;"/>';
				svg += '<ellipse cx="'+cx+'" cy="'+cy+'" rx="'+(rxt-13)+'" ry="'+(ryt-5)+'" style="fill:url(#grad2);"/>';
				svg += graph.drawCircle((cx+rxb+(rxt-rxb)/2),(cy+h/2),2,"fill:#FF0000;");
				svg += graph.drawCircle((cx-rxb-(rxt-rxb)/2),(cy+h/2),2,"fill:#FF0000;");
				svg += '</svg>';
				$('#echarts').append(svg);
			}
			drawGuo();
		</script>
	</body>
</html>
